<template>
  <div class="logincontiner">
    <!-- ref 属性涉及Dom 元素的获取(el-form表单对象)。 -->
    <el-form
      class="loginForm"
      :model="loginForm"
      ref="loginForm"
      :inline="false"
      size="medium"
      :rules="loginRues"
    >
      <el-form-item>
        <div class="loginTitle">系统登录</div>
      </el-form-item>

      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
            ></el-input>
          </el-col>
          <el-col :span="8">
            <img :src="imgSrc" alt="" @click="getImage"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-button class="btn" @click="commitBtn" type="primary"
              >登录</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button class="btn" @click="restBtn" type="primary"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from "../api/login";
import Cookies from "js-cookie";
import { getImageApi } from "../api/user";
export default {
  data() {
    return {
      imgSrc: "",
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      loginRues: {
        username: [
          { required: true, trigger: "chenge", message: "请输入用户名" },
        ],
        password: [
          { required: true, trigger: "chenge", message: "请输入密码" },
        ],
        code: [{ required: true, trigger: "chenge", message: "请输入验证码" }],
      },
    };
  },
  created() {
    this.getImage();
  },
  methods: {
    //获取验证码
    async getImage() {
      let res = await getImageApi();
      let array = res.data;
      let imageData =
        "data:image/png;base64," +
        btoa(
          new Uint8Array(array).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ""
          )
        );
      this.imgSrc = imageData;
    },
    commitBtn() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          
          let res = await login(this.loginForm);
          console.log(res)
          if(res.data.code == 200){
            this.$message.success(res.data.msg)
            let datas = res.data;
            Cookies.set('token',datas.token)
            this.$router.push("home")
          }else{
            this.$message.error(res.data.msg)
          }
        }
      });
    },
    restBtn() {
      this.$refs["loginForm"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.logincontiner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginForm {
    height: 300px;
    height: 350px;
    box-shadow: 0 0 25px #cac6c6;
    border-radius: 10px;
    padding: 20px 35px;
    .loginTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 24px;
    }
    .btn {
      width: 100%;
    }
  }
}
</style>
